<script setup lang="ts">
import { reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { unifiedorder_api } from "@/package/study/api/groupon2";
import { EV_ORDER } from "@/constant/event";
import { requestPayment } from "@/utils/payment";
import { Router } from "@/utils/router";
import { Toast } from "@/utils/toast";

import FormButton from "@/components/form/button.vue";

onLoad((options) => {
  infoData.img = decodeURIComponent(options?.img);
  infoData.name = decodeURIComponent(options?.name);
  infoData.price = options?.price;

  tempData.priceType = options?.priceType;
  tempData.productNo = options?.productNo;
  tempData.batchNo = options?.batchNo;

  tempData.guiderId = options?.guiderId;
});

const infoData = reactive({ img: "", name: "", price: "" });

const payClick = () => {
  Toast.showLoading();
  unifiedorder_api({
    pay_type: 1,
    price_type: tempData.priceType,
    batch_no: tempData.batchNo,
    product_no: tempData.productNo,
    pay_from: "miniprogram",
    guider_id: tempData.guiderId,
  })
    .then((resp) => {
      Toast.hideLoading();
      requestPayment(resp, () => {
        uni.$emit(EV_ORDER, {
          type: "pay",
          data: { type: "course", id: tempData.productNo },
        });
        Router.navigateBack();
      });
    })
    .catch(() => Toast.hideLoading());
};

const tempData = { priceType: "", productNo: "", batchNo: "", guiderId: "" };
</script>

<template>
  <view class="settle-product">
    <image class="settle-product-img" :src="infoData.img" mode="aspectFill" />
    <view class="settle-product-content">
      <view class="settle-product-name">{{ infoData.name }}</view>
    </view>
  </view>

  <view class="settle-fixed">
    <view class="settle-total">
      <view class="settle-total-price">
        <view class="settle-total-price2">总计</view>
        <view class="settle-total-price3">￥</view>
        {{ infoData.price }}
      </view>
    </view>

    <view class="settle-btn" @click="payClick">
      <FormButton>去支付</FormButton>
    </view>
  </view>
</template>

<style lang="scss">
page {
  padding-top: 30rpx;
}

.settle-product {
  display: flex;
  align-items: flex-start;
  padding: 20rpx;
  margin: 0 30rpx 20rpx;
  border-radius: 20rpx;
  background-color: #ffffff;

  .settle-product-img {
    flex-shrink: 0;
    width: 200rpx;
    height: 150rpx;
    border-radius: 20rpx;
  }

  .settle-product-content {
    flex-grow: 1;
    min-width: 0;
    padding-top: 10rpx;
    margin-left: 20rpx;
  }

  .settle-product-name {
    height: 88rpx;
    font-size: 30rpx;
    color: #333333;
    line-height: 44rpx;
    font-weight: bold;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  // .settle-product-price {
  //   font-size: 24rpx;
  //   color: #666666;
  //   line-height: 34rpx;
  // }
}

.settle-discount {
  padding: 30rpx 20rpx 2rpx;
  margin: 0 30rpx 20rpx;
  border-radius: 20rpx;
  background-color: #ffffff;

  .settle-discount-item {
    margin-bottom: 30rpx;
  }
}

.course-tip {
  margin: 0 60rpx 30rpx;
  font-size: 24rpx;
  color: #999999;
  line-height: 34rpx;

  .course-tip-phone {
    color: #333333;
    text-decoration: underline;
  }
}

.settle-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  height: 120rpx;
  padding: 0 30rpx env(safe-area-inset-bottom);
  background-color: #ffffff;
}

.settle-total {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-grow: 1;
  min-width: 0;

  .settle-total-price {
    display: flex;
    align-items: flex-end;
    font-size: 48rpx;
    color: #ee5734;
    line-height: 58rpx;
    font-weight: bold;
  }

  .settle-total-price2 {
    font-size: 28rpx;
    color: #2d2d2d;
    line-height: 44rpx;
    font-weight: 400;
  }

  .settle-total-price3 {
    font-size: 36rpx;
    line-height: 46rpx;
  }
}

.settle-btn {
  width: 302rpx;
  margin-left: 20rpx;
}
</style>
